<template>
	<view>
		<view class="my_top">
			<image src="../../static/index/mybg.png" class="mybg" mode="aspectFill" />
			<view class="myinfo z-margin-lr-32" :style="'padding-top:' + safeTop">
				<image class="z-margin-r-32 avatar" v-if="info" :src="cdn(info.avatar)" />
				<image class="z-margin-r-32 avatar" v-else :src="cdn(config.user_image)" @click="login" />
				<view class="myinfo_text">
					<text class="z-font-40" v-if="info">{{ info.nickname }}</text>
					<text class="z-font-40" v-else @click="login">请先登录</text>
					<view class="namebox_text z-padding-r-16 z-margin-t-16 z-font-22" v-if="plusInfo.is_plus > 0">
						<image src="../../static/index/vip.png" class="vip" mode="" />
						<view class="plusname z-flex">{{ plusInfo.plusname }}</view>
					</view>
				</view>
			</view>
			<view class="all_box z-radius-24">
				<view class="menber_box z-padding-24" @click="skip('/service/level/level')">
					<view class="menber_box_left">
						<image src="../../static/index/king.png" class="king_img z-margin-r-16" mode="" />
						<view class="menber_box_text">
							<view class="z-font-w menber_text">家政会员</view>
							<view class="z-font-24 text_999 z-margin-t-16">开通会员可享受项目会员价</view>
						</view>
					</view>
					<view class="poenit z-padding-tb-8 z-padding-lr-24 z-font-28 z-radius-24 z-font-w">
						{{ plusInfo.is_plus > 0 ? '立即续费' : '立即开通' }}
					</view>
				</view>
				<view class="fourbox z-radius-24 z-padding-24">
					<view class="fourboxitem" @click="skip('/service/focus/focus?active=0&name=关注服务者')">
						<view class="z-font-w">{{ info.skillFollow || 0 }}</view>
						<view class="z-font-24 text_666 z-margin-t-8">关注服务者</view>
					</view>
					<view class="fourboxitem" @click="skip('/service/focus/focus?active=1&name=收藏项目')">
						<view class="z-font-w">{{ info.goodsFollow || 0 }}</view>
						<view class="z-font-24 text_666 z-margin-t-8">收藏项目</view>
					</view>
					<view class="fourboxitem" @click="skip('/service/focus/focus?active=2&name=关注店铺')">
						<view class="z-font-w">{{ info.shopFollow || 0 }}</view>
						<view class="z-font-24 text_666 z-margin-t-8">关注店铺</view>
					</view>
				</view>
				<view class="z-flex-c z-padding-lr-32 z-padding-b-32">
					<view class="more z-padding-24 z-radius-20" @click="skip('/service/mycoup/mycoup')">
						<image class="icon" src="/static/index/coupon-icon.png"></image>
						<view class="z-font-26 pos">我的优惠券</view>
						<view class="pos z-margin-t-16">
							<text class="z-font-30 num z-padding-r-16">{{ info.couponCount || 0 }}</text>
							<text class="z-font-22 text_666">张未使用</text>
						</view>
					</view>
					<view class="z-flex-1"></view>
					<view class="more z-padding-24 z-radius-20" @click="skip('/service/recharge/recharge')">
						<image class="icon" src="/static/index/wallet-icon.png"></image>
						<view class="z-font-26 pos">我的钱包</view>
						<view class="pos z-margin-t-16">
							<text class="z-font-30 num z-padding-r-16">{{ info.money || 0 }}</text>
							<text class="z-font-22 text_666">元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order_box z-radius-24 z-padding-32">
				<view class="order_box_top" @click="myOrder(1, 0)">
					<view class="z-font-30">我的订单</view>
					<view class="z-font-24 text_999 z-flex">
						全部订单
						<!-- <van-icon name="arrow" /> -->
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</view>
				<view class="fourbox z-margin-t-32">
					<!--  data-type="1" data-active="1" -->
					<view class="fourboxitem" @click="myOrder(1, 1)">
						<view class="num-box">
							<image src="../../static/index/dfk.png" class="fourbox_img" mode="" />
							<view class="point z-flex" v-if="info && info.orderCount.unpayCount > 0">{{ info.orderCount.unpayCount }}</view>
						</view>

						<view class="z-margin-t-8 z-font-28">待付款</view>
					</view>
					<view class="fourboxitem" @click="myOrder(1, 2)">
						<view class="num-box">
							<image src="../../static/index/dfw.png" class="fourbox_img" mode="" />
							<view class="point z-flex" v-if="info && info.orderCount.unServiceCount > 0">{{ info.orderCount.unServiceCount }}</view>
						</view>

						<view class="z-margin-t-8 z-font-28">待服务</view>
					</view>
					<view class="fourboxitem" @click="myOrder(1, 3)">
						<view class="num-box">
							<image src="../../static/index/fwz.png" class="fourbox_img" mode="" />
							<view class="point z-flex" v-if="info && info.orderCount.serviceCount > 0">{{ info.orderCount.serviceCount }}</view>
						</view>

						<view class="z-margin-t-8 z-font-28">服务中</view>
					</view>
					<view class="fourboxitem" @click="myOrder(2, 0)">
						<view class="num-box">
							<image src="../../static/index/dpj.png" class="fourbox_img" mode="" />
							<view class="point z-flex" v-if="info && info.orderCount.notCommentCount > 0">
								{{ info.orderCount.notCommentCount }}
							</view>
						</view>

						<view class="z-margin-t-8 z-font-28">待评价</view>
					</view>
					<view class="fourboxitem" @click="myOrder(3, 0)">
						<view class="num-box">
							<image src="../../static/index/sh.png" class="fourbox_img" mode="" />
							<view class="point z-flex" v-if="info && info.orderCount.refundCount > 0">{{ info.orderCount.refundCount }}</view>
						</view>
						<view class="z-margin-t-8 z-font-28">售后</view>
					</view>
				</view>
			</view>

			<view class="setting_box z-margin-t-32 z-radius-24 z-padding-lr-32 z-padding-t-40 z-padding-b-16">
				<view class="setting_box_item" @click="skip(item)" v-for="(item,index) in menuList">
					<image :src="item.icon" class="setting_box_img" mode="" />
					<view class="z-font-24 z-margin-t-16">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			info: '',
			config: uni.getStorageSync('config'),
			menuList:[
				{url:'/service/question/question',name:'帮助中心',icon:'../../static/index/help.png'},
				{url:'/service/feedback/feedback',name:'意见反馈',icon:'../../static/index/feedback.png'},
				{url:'',name:'联系客服',icon:'../../static/index/lxkf.png'},
				{url:'/service/couponscenter/couponscenter',name:'优惠券',icon:'../../static/index/lqzx.png'},
				{url:'/service/comments/comments?type=user&id=',name:'我的评价',icon:'../../static/index/wdpj.png'},
				{url:'',name:'服务接单',icon:'../../static/index/fwjd.png'},
				{url:'',name:'商家入驻',icon:'../../static/index/sjrz.png'},
				{url:'/service/addressmanager/addressmanager',name:'服务地址',icon:'../../static/index/fwdz.png'},
				{url:'/service/notice/notice',name:'平台公告',icon:'../../static/index/notice.png'},
				{url:'/service/setpage/setpage',name:'设置',icon:'../../static/index/set.png'}
			],
			plusInfo:'',
			// #ifdef MP-WEIXIN
				safeTop:uni.getStorageSync('safeTop')
			// #endif
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			if (!uni.getStorageSync('token')) return;
			http.post('index/userindex', '', !this.info).then((res) => {
				this.info = res.data;
				this.plusInfo = this.info.plusInfo
			});
		},
		skip(item){
			let url
			if(item.name == '我的评价'){
				url = item.url + this.info.id
			} else {
				url = item.url ? item.url : item
			}    
		    this.util.authSkip(url)
		},
		myOrder(type,active){
		    let num = this.info ? this.info.orderCount.unServiceCount : 0
		    this.util.authSkip('/service/myorder/myorder?type='+type+'&active='+active+'&num='+num)
		},
		 login(){
		    this.util.skip('/service/login/login')
		  },
	}
};
</script>

<style lang="scss">
	page {
		background: #EDF1F4;
	}
.mybg {
	width: 100vw;
	position: absolute;
}
.my_top {
	position: relative;
}
.avator {
	width: 118rpx;
	height: 118rpx;
}
.myinfo {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.avatar {
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
}
.myinfo_text {
	display: flex;
	flex-direction: column;
}
.vip {
	width: 50rpx;
	height: 50rpx;
}
.namebox_text {
	display: flex;
	align-items: center;
}

.plusname {
	background: linear-gradient(90deg, #ffb40e 0%, #ff5942 100%);
	color: #fff;
	height: 46rpx;
	border-radius: 0 24rpx 24rpx 0;
	padding: 0 24rpx 0 40rpx;
	margin-left: -30rpx;
}
.vip {
	width: 50rpx;
	height: 50rpx;
	z-index: 10rpx;
	position: relative;
}

.menber {
	background-color: #fff;
}
.all_box {
	position: relative;
	margin: 50rpx auto;
	width: 686rpx;
	/* box-sizing: border-box; */
	background-color: #fff;
	overflow: hidden;
}
.menber_box {
	background-color: #1c274c;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.menber_box_left {
	display: flex;
	align-items: flex-start;
}
.king_img {
	width: 44rpx;
	height: 44rpx;
}
.menber_box_text {
	display: flex;
	flex-direction: column;
}
.menber_text {
	color: #f7c566;
}
.poenit {
	background-color: #f7c566;
}
.fourbox {
	background-color: #fff;
	display: flex;
	align-items: center;
}
.fourboxitem {
	display: flex;
	position: relative;
	align-items: center;
	flex-direction: column;
	flex: 1;
}

.more {
	position: relative;
	width: 300rpx;
	height: 144rpx;
	background: #fffbf0;
	box-sizing: border-box;
}
.more .num {
	color: #ff9600;
}
.more:last-of-type {
	background: #f0faf3;
}

.icon {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	top: 30rpx;
	right: 24rpx;
}
.pos {
	position: relative;
	z-index: 10;
}

.order_box {
	background-color: #fff;
	width: 686rpx;
	margin: 0 auto;
	box-sizing: border-box;
}
.order_box_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.num-box {
	position: relative;
	width: 48rpx;
	height: 48rpx;
}
.fourbox_img {
	width: 48rpx;
	height: 48rpx;
}
.point {
	position: absolute;
	color: #fff;
	background-color: #f22e2e;
	font-size: 18rpx;
	border-radius: 50%;
	width: 24rpx;
	height: 24rpx;
	text-align: center;
	right: -4rpx;
	top: -4rpx;
}
.setting_box {
	width: 686rpx;
	background-color: #fff;
	margin: 0 auto 100rpx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.setting_box_item {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 25%;
	margin-bottom: 20rpx;
	position: relative;
}
.contact {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.setting_box_img {
	width: 48rpx;
	height: 48rpx;
}
.lastsetting {
	margin: 50rpx auto;
	width: 686rpx;
	height: 120rpx;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lastsetting_left {
	display: flex;
	align-items: center;
}
.lastsetting_img {
	width: 40rpx;
	height: 40rpx;
}
</style>
